<script setup>
import {ref} from "vue";

let age = ref(0); //定义数字
function updateAge() {
  console.log(age);
  age.value = 18;
}

//1、作用域
function testVar() {
  var a = 10; // a 是局部的
  if (true) {
    var b = 20; // b 也是局部的，但在函数外部可以访问，因为它是 var 声明的
  }
  console.log(b); // 输出 20
}

function testLetConst() {
  let c = 10; // c 是局部的
  if (true) {
    let d = 20; // d 只在 if 代码块内可见
    const e = 30; // e 也是
  }
  console.log(d); // 报错：d is not defined
  console.log(e); // 同样报错：e is not defined
}

//2、重复声明
var x = 10;
var x = 20; // 允许，但 x 的值现在是 20

let y = 10;
let y = 20; // 报错：Identifier 'y' has already been declared

const z = 10
const z = 20;

//3、重新赋值
var z = 10;
z = 20; // 允许，z 的值现在是 20

let w = 10;
w = 20; // 允许，w 的值现在是 20

const m = 10; // 类似于java中的final
m = 20; // 报错：Assignment to constant variable.

const n = {}; //定义一个对象
n.property = 'hello'; // 允许，因为 n 的值（即对象的引用）没有改变，可以修改对象里面的值，不能修改对象的引用地址
</script>


<template>
  <p>
    {{age}} 岁
  </p>
  <button @click="updateAge()">修改年龄</button>
</template>

<style scoped>

</style>